<template>
    <div class="login-box">
        <div class="login-img"><img src="../../images/logo.jpeg" alt=""></div>
        <van-field v-model="tel" left-icon="phone-circle" type="tel" placeholder="请输入手机号码"/>

        <van-field v-model="code" left-icon="bell" size="large" type="tel" placeholder="请输入短信验证码">
            <template #button>
                <van-button size="samll" color="red" plain @click="getCode"
                :disabled="!/^1[3-9][0-9]{9}$/.test(tel)">{{ codeText }}</van-button>
            </template>
        </van-field>

        <van-checkbox v-model="telchecked" checked-color="#ee0a24">记住电话</van-checkbox>
        <br>
        <van-checkbox v-model="autochecked" checked-color="#ee0a24">免登录</van-checkbox>
        <br>
             
        <van-button class="login" :disabled="!canlogin"  type="primary"
        color="linear-gradient(to right, #ff6034, #ee0a24)" block @click="login">登录</van-button>

        <span class="toreg" @click="toreg">没有账号？ 去注册</span>

        <span class="login-text">登录即代表您已同意<a href="javascript:;">《用户注册与登录条款》 《隐式政策》</a></span>
    </div>
</template>

<script>
    import { autologin, getCode, login } from '../../apis/LoginApi'
    export default {
        data(){
            return{
                tel: '14781740997', // 电话号码
                code: '', // 验证码
                timer: null,
                codeText: '获取验证码',// 验证码
                telchecked: false, // 是否记住电话 
                autochecked: false // 是否免登录
            }
        },
        created () {
          if (!!localStorage.getItem('tel')) {
              this.tel = localStorage.getItem('tel')
              this.telchecked = true
          }
          if (!!localStorage.getItem('token')) {
              this.autochecked = true
              this.$toast.loading({
                message: '登录中...',
                forbidClick: true,
                loadingType: 'spinner',
              });
              autologin().then((res) => {
                  if (res.code === 200) {
                    this.$toast.clear(true)
                    this.$store.commit('common/mutationToken', res.data.token)
                    this.$store.commit('common/mutationUser', res.data)
                    this.$router.push('/index/home')
                  }else{
                    this.$toast.clear(true)
                    this.$toast({
                        message: '自动登录失败请重新登录',
                        position: 'bottom',
                    });
                    this.$store.commit('common/mutationToken', '')
                    this.$store.commit('common/mutationUser', '')
                    localStorage.removeItem('token')
                    this.autochecked = false
                  }
              })
          }
          
        },
        // 计算属性
        computed:{
            // 是否可以点击登录
            canlogin(){
                return /^1[3-9][0-9]{9}$/.test(this.tel) && /^[0-9]{4}$/.test(this.code)
            },
        },
        // 监听属性
        watch:{
            tel:{
                immediate:true,
                handler(){
                    this.code = ''
                    this.codeText = '获取验证码'
                    clearInterval(this.timer)
                    this.timer = null
                }
            }
        },
        // 方法
        methods: {
            // 跳转到登录页面
            toreg(){
                this.$router.push('/register')
            },
            // 获取验证码
            getCode(){
                if (this.codeText === '获取验证码') {
                    this.code = ''
                    this.codeText = '获取验证码 60s'
                    this.editCodeText()
                    getCode(this.tel).then(res => {
                        if (res.code === 200) {
                            this.$toast({
                                message: res.data.code,
                                position: 'bottom',
                            });
                        }else if(res.code === 400){
                            this.$toast({
                                message: res.message,
                                position: 'bottom',
                            });
                        }else{
                            this.$toast({
                                message: '失败',
                                position: 'bottom',
                            });
                        }
                    })
                }
            },
            // 重新获取验证码倒计时
            editCodeText(){
                let t = 60
                this.timer = setInterval(()=>{
                    t -= 1
                    this.codeText = `获取验证码 ${t}s`
                    if (t === 0) {
                        this.codeText = '获取验证码'
                        clearInterval(this.timer)
                        this.timer = null
                    }
                },1000)
            },
            login(){
                login({tel:this.tel,code:this.code}).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        // 判断是否需要记住电话
                        if (this.telchecked) {
                            localStorage.setItem('tel', this.tel)
                        }else{
                            localStorage.removeItem('tel')
                        }
                        // 判断是否需要免登录
                        if (this.autochecked) {
                            localStorage.setItem('token', res.data.token)
                        }else{
                            localStorage.removeItem('token')
                        }

                        this.$store.commit('common/mutationToken', res.data.token)
                        this.$store.commit('common/mutationUser', res.data)
                        this.$router.push('/index/home')
                    }else{
                        this.$toast({
                            message: res.message,
                            position: 'bottom',
                        });
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .login-box{
        height: 100%;
        padding: 16px;
        .login-img{
            margin: 80px 0;
            text-align: center;
            > img{
                width: 80px;
                height: 80px;
            }
        }
        .van-cell{
            margin-bottom: 16px;
            line-height: 40px;
            border-bottom: 1px solid rgba(167, 156, 156, 0.66);
            font-size: 18px;
        }
        .van-button{
            height: 1.8rem;
            width: 4.8rem;
            vertical-align: middle;
            font-size: 12px;
        }
        .login{
            width: 95%;
            margin: 0 auto;
            height: 2.5rem;
            border-radius: 14px;
            font-size: 16px;
            margin-bottom: 15px;
            .van-button__text{
                letter-spacing: 2px;
                text-align: center;
            }
        }
        .van-checkbox{
            font-size: 15px;
        }
        .login-text{
            font-size: 12px;
            position: absolute;
            bottom: 0;
            > a{
                color: red;
            }
        }
        .toreg{
            position: absolute;
            right: 25px;
            border-bottom: 1px solid red;
            font-size: 12px;
        }
    }
</style>